<template>
  <div class="tips-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">视图设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number :min="0" size="small" v-model="optionsInfo['viewHeight']"/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            :predefine="predefineColors"
            show-alpha v-model="optionsInfo.background"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">图标设置</el-divider>
      </div>
      <el-form-item label="显示控制">
        <el-switch v-model="optionsInfo['icon']['shown']"/>
      </el-form-item>
      <el-form-item label="图标大小">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.icon.fontSize"
        />
      </el-form-item>
      <el-form-item label="图标颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.icon.fontColor"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">日期时间设置</el-divider>
      </div>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.iconTime.background"
        />
      </el-form-item>

      <el-form-item label="日期显示控制">
        <el-switch v-model="optionsInfo['dateTime']['shown']"/>
      </el-form-item>
      <el-form-item label="时间显示控制">
        <el-switch v-model="optionsInfo['dateTime']['timeShown']"/>
      </el-form-item>

      <el-form-item label="日期格式" class="column-info">
        <el-select v-model="optionsInfo.dateTime.value" placeholder="请选择">
          <el-option
              v-for="item in dateTimeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期时间字体大小" class="column-area">
        <el-input-number :min="0" size="small" v-model="optionsInfo.dateTime.fontSize"/>
      </el-form-item>
      <el-form-item label="日期时间字体粗细" class="column-area">
        <el-select v-model="optionsInfo.dateTime.fontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期时间字体颜色" class="column-area">
        <el-color-picker
            v-model="optionsInfo.dateTime.fontColor"
            size="small" show-alpha
            :predefine="predefineColors"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">内容设置</el-divider>
      </div>
      <el-form-item label="温馨提示" class="column-area">
        <el-input
            :min="0"
            size="small"
            type="textarea"
            class="hide-spin-button"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="optionsInfo.content.value"/>
      </el-form-item>
      <el-form-item label="背景颜色" v-if="false">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.content.background"
        />
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input-number :min="0" size="small" v-model="optionsInfo.content.fontWeight"/>
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo.content.fontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            v-model="optionsInfo.content.fontColor"
            size="small" show-alpha
            :predefine="predefineColors"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
          v-model="optionsInfo.content.background"
          size="small" show-alpha
          :predefine="predefineColors"
        />
      </el-form-item>
      <template v-if="false">
        <el-form-item label="是否滚动">
          <el-switch v-model="optionsInfo.content.scrollable"/>
        </el-form-item>
        <el-form-item
            label="滚动速度(设备比例*19.2*速率/s)"
            class="column-area"
        >
          <el-input-number
              :disabled="!(optionsInfo.content.scrollable)"
              :precision="1" :min="1" :max="20" size="small"
              v-model="optionsInfo.content.speed"/>
        </el-form-item>
      </template>
    </div>

  </div>
</template>

<script>
import {Icon} from 'vant';
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "scrollXConfig-editor",

  componentName: "scrollXConfig-editor",

  mixins: [],

  components: {
    Icon
  },

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      fontWeightOptions: types['fontWeightOptions'],
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      dateTimeOptions: types['dateTimeOptions'],
      iconOptions: [
        {
          value: 'volume',
          label: '图标1'
        },
        {
          value: 'bell',
          label: '图标2'
        }
      ],
      viewModelOptions: [
        {
          value: 1,
          label: "视图一",
        },
        {
          value: 2,
          label: "视图二",
        }
      ],
    }
  },

  methods: {
    // 视图模式
    handleChangeView(val) {
      switch (val) {
        case 1:
          Reflect.set(this.optionsInfo, 'contentHeight', 100)
          Reflect.set(this.optionsInfo, 'headerFontSize', 66)
          Reflect.set(this.optionsInfo, 'listFontSize', 40)
          break
        case 2:
          Reflect.set(this.optionsInfo, 'contentHeight', 60)
          Reflect.set(this.optionsInfo, 'headerFontSize', 56)
          Reflect.set(this.optionsInfo, 'listFontSize', 32)
          break
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }
  }

}
</style>
